<template>
  <view class="cm-input" :class="[cmClass]" :style="[cmStyle]">
    <!-- 输入框前文字 -->
    <slot></slot>
    
    <!-- 输入框主体 -->
    <view class="cm-input-wrapper cm-margin-left-10"
      :class="[borderClass]"
      :style="[sizeStyle]">
      <input class="cm-flex-g-1"
        :value="value"
        :type="type"
        :password="state.password"
        :disabled="disabled"
        :placeholder="placeholder"
        :placeholder-class="placeholderClass"
        :placeholder-style="placeholderFinalStyle"
        :focus="focus"
        :maxlength="maxlength"
        :confirm-type="confirmType"
        @input="inputHandler"
        @focus="focusHandler"
        @blur="blurHandler"
        @confirm="confirmHandler"
        @keyboardheightchange="keyboardChangeHandler" />
      <view class="cm-flex cm-flex-a-center">
        <!-- 输入框的工具 -->
        <cm-icon v-if="clearable && inputValue !== ''" size="24" type="iconfont icon-reeor-fill"
          cm-class="app-text-color-grey cm-margin-left-3" @click="clearHandler"></cm-icon>
        <cm-icon v-if="password" size="24" type="iconfont icon-cm-eye"
          :cm-class="state.password ? 'app-text-color-grey cm-margin-left-3' : 'app-theme-color cm-margin-left-3'"
          @click="showPasswordHandler"></cm-icon>
      </view>
    </view>
      
  </view>
</template>

<script src="./cm-input.js"></script>

<style lang="stylus">
@import './cm-input.styl'
</style>
